<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="orders system">
      <home-bar :currentPage='currentPage'></home-bar>
      <div class="order-main system-main">
        <div class="main-position">
          首页 > 订单管理 > {{currentPageName}} >订单详情
        </div>
        <div class="main-height"></div>
        <div class="main-mains">
          <div class="main-top-nav">
            <ul>
              <router-link to="/allorders/all" @click.native="addPath('/allorders/all','订单管理','全部订单')">
                <li :class="{active:this.$route.params.id==0}">全部订单</li>
              </router-link>
              <router-link to="/allorders/unconfirmed" @click.native="addPath('/allorders/unconfirmed','订单管理','未确认订单')">
                <li :class="{active:this.$route.params.id==2}">未确认订单</li>
              </router-link>
              <router-link to="/allorders/pendingdelivery" @click.native="addPath('/allorders/pendingdelivery','订单管理','待发货订单')">
                <li :class="{active:this.$route.params.id==3}">待发货订单</li>
              </router-link>
              <router-link to="/allorders/alreadyshipped" @click.native="addPath('/allorders/alreadyshipped','订单管理','已发货订单')">
                <li :class="{active:this.$route.params.id==4}">已发货订单</li>
              </router-link>
              <router-link to="/allorders/settleds" @click.native="addPath('/allorders/settleds','订单管理','已结算订单')">
                <li :class="{active:this.$route.params.id==5}">已结算订单</li>
              </router-link>
            </ul>
          </div>
          <div class="orderInner">
            <div :class="{ printss: isActive,prints}">
              <div class="orderDetails-mains">
                <div class="orderDetails-mains-top" v-if="!isActive">
                  <span class="orderDetails-mains-l">订单{{order.order_no}}</span>
                  <span class="orderDetails-mains-r"></span>
                </div>
                <div class="orderDetails-mains-tops clear" v-if="!isActive">
                  <div class="orderDetails-mains-tops-l w33 fl">
                    <div>下单时间：{{order.create_time}}</div>
                    <div>客户名称：{{order.client_name}}</div>
                    <div>订单来源：{{order.referer == 1 ? "PC商城":"APP"}}</div>
                  </div>
                  <div class="orderDetails-mains-tops-m w33 fl">
                    <div>药品数量：{{order.medical_count}}款</div>
                    <div>订单状态：<span class="orderDetails-actives">{{order.status | statusFun}}</span></div>
                    <div>获得积分：{{order.total}}分</div>
                  </div>
                  <div class="orderDetails-mains-tops-r w33 fl">
                    <div class="mar-auto">
                      <div class="orderDetails-bar-code">
                        <barcode :value="order.order_no" :options="barcode_option" tag="svg" class="orderDetails-bar-codes"></barcode>
                      </div>
                      <div class="orderDetails-mains-tops-r-t">
                        订单编码：{{order.order_no}}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="orderDetails-mains-main-m">
                  <!-- 药品列表开始 -->
                  <div class="orderDetails-mains-mains" v-for="(item,index) in order.medical_list" :key="index">
                    <div class="orderDetails-mains-mains-top clear">
                      <div class="orderDetails-mains-mains-top-l fl" v-if="!isActive">
                        药品名称： <span>{{item.medical_name}}</span> 库存： <span>100000件</span> 单位: <span>件</span>
                      </div>
                      <div class="orderDetails-mains-mains-top-l fl" v-else>药品名称： <span>感抗感冒药</span> 单位: <span>件</span></div>
                      <div class="orderDetails-mains-mains-top-r fr" v-if="!isActive">
                        信息费比例 <span>{{item.info_fee_rate * 100}}%</span> 信息费 <span>￥{{item.info_fee}}</span> 获得积分: <span>{{item.bonus_points}}分</span>
                      </div>
                    </div>
                    <div class="orderDetails-mains-mains-bot clear" v-if="!isActive">
                      <div class="fl orderDetails-mains-mains-bot-l1 clear">
                        <div class="fl orderDetails-mains-img">
                          <img :src="item.image_url" alt="">
                        </div>
                        <div class="orderDetails-mains-txts fl">
                          <div>规格：0.36g*35粒</div>
                          <div>生产企业：广东制药</div>
                          <div>药品种类：{{item.category_name}}</div>
                        </div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l2">
                        <div>￥{{item.price}}</div>
                        <div>单价</div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l3">
                        <div>{{item.total}}件</div>
                        <div>数量</div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l4">
                        <div>￥{{item.price * item.total}}</div>
                        <div>合价</div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l5">
                        <div>￥{{item.amount - item.info_fee}}</div>
                        <div>应到账</div>
                      </div>
                    </div>
                    <div class="orderDetails-mains-mains-bot orderDetails-mains-mains-bots clear" v-else>
                      <div class="fl orderDetails-mains-mains-bot-l1  clear">
                        <div class="fl orderDetails-mains-img">
                          <img :src="item.image_url" alt="">
                        </div>
                        <div class="orderDetails-mains-txts fl">
                          <div>规格：0.36g*35粒</div>
                          <div>生产企业：广东制药</div>
                          <div>药品种类：{{item.category_name}}</div>
                        </div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l2">
                        <div>￥{{item.price}}</div>
                        <div>单价</div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l3">
                        <div>{{item.total}}件</div>
                        <div>数量</div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l4">
                        <div>￥{{item.price * item.total}}</div>
                        <div>合价</div>
                      </div>
                      <div class="fl orderDetails-mains-mains-bot-l5">
                        <div>￥{{item.amount - item.info_fee}}</div>
                        <div>应到账</div>
                      </div>
                    </div>
                  </div>
                  <!-- 药品列表结束 -->
                </div>
                <div class="orderDetails-people clear">
                  <div class="orderDetails-people-l fl">
                    <div class="orderDetails-people-l-title">发货信息</div>
                    <div><span>发货人姓名：</span>{{order.delivery_name}}</div>
                    <div><span>收货人电话：</span>{{order.delivery_mobile}}</div>
                    <div><span>收货地址：</span>{{order.com_address}}</div>
                  </div>
                  <div class="orderDetails-people-l fl">
                    <div class="orderDetails-people-l-title">发票信息</div>
                    <div><span>发票抬头</span>{{order.invoice_title}}</div>
                    <div><span>税号：</span>{{order.tax_num}}</div>
                  </div>
                </div>
                <div class="orderDetails-people clear">
                  <div class="orderDetails-people-l fl">
                    <div class="orderDetails-people-l-title">物流信息</div>
                    <div><span>物流单号：</span>{{order.logistics_num}}</div>
                    <div><span>物流公司：</span>{{order.logistics_com}}</div>
                  </div>
                  <div class="orderDetails-people-l fl">
                    <div class="orderDetails-people-l-title">备注信息</div>
                    <div class="clear"><span class="orderDetails-people-l-txt fl">备注：</span>
                      <span class="orderDetails-people-l-txts fl">{{order.description}}</span>
                    </div>
                  </div>
                </div>
                <div class="orderDetails-people clear">
                  <div class="orderDetails-people-l fl">
                    <div class="orderDetails-people-l-title">支付信息</div>
                    <div><span>支付方式：</span>{{order.pay_type | pay_type_fun}}</div>
                    <div><span>订单总价：</span>￥{{order.amount}}</div>
                  </div>
                  <div class="orderDetails-people-l fl">
                    <div class="orderDetails-people-l-title"> </div>
                    <div><span>信息费：</span>￥{{order.info_fee}}</div>
                    <div><span>应到账：</span>￥{{order.amount - order.info_fee}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="orderDetails-btns" v-if="unconfirmed" @click="clickConfirmOrder(order.order_id)">
              确认订单
            </div>
            <div class="orderDetails-btns orderDetails-btnss" v-if="pendingdelivery" @click="deliverys(order.order_id)">
              发货
            </div>
            <div class="orderDetails-btnsss clear" v-if="otherallorders">
              <div class="orderDetails-btns fl" @click="print()">
                打印仓库取货单
              </div>
              <div class="orderDetails-btns fl" @click="prints()">
                打印发货单
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="system-menban" v-if="showSystemPopup">
      </div>
      <div class="systemPopup" v-if="showSystemPopup">
        <div class="topTitle">
          <span>{{systemPopupTitle}}</span>
          <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
        </div>
        <!-- 发货弹窗 -->
        <div class="orderDetails-screeningPopup clear" v-show="showDeliveryPopup">
          <div class="clear">
            <div class="orderDetails-screeningPopup-l fl">物流单号</div>
            <div class="orderDetails-screeningPopup-r fl">
              <el-input v-model="logistics_num" clearable></el-input>
            </div>
          </div>
          <div class="orderDetails-prompt" v-show="showLogisticsComTip">错误提示!</div>
          <div class="clear">
            <div class="orderDetails-screeningPopup-l fl">物流公司</div>
            <div class="orderDetails-screeningPopup-r fl">
              <el-input v-model="logistics_com" clearable></el-input>
            </div>
          </div>
          <div class="orderDetails-prompt" v-show="showLogisticsNumTip">错误提示!</div>
          <div class="orderDetails-screeningPopup-btn clear">
            <div class="orderDetails-screeningPopup-btn-l fl" @click="clickChangeTotal(4)">提交</div>
            <div class="orderDetails-screeningPopup-btn-r fl" @click="hideSystemPopup">取消</div>
          </div>
        </div>
        <!-- 确认订单弹窗 -->
        <div class="orderDetailPopup" v-show="showOrderDetailPopup">
          <ul>
            <li v-for="(item,index) in order.medical_list" :key="index">
              <div class="topMsg"><span>药品名称：{{item.medical_name}}</span></div>
              <div class="numBox">
                <span class="leftTitle">客户下单数量</span>
                <div class="rightContent">{{item.total}}</div>
              </div>
              <div class="numBox">
                <span class="leftTitle">确定有货数量</span>
                <div class="rightContent">
                  <el-input v-model="confirmTotalList[index]" @change="changeTotalNum(item.total,confirmTotalList[index],index,item.medical_id)"></el-input>
                </div>
              </div>
              <div class="orderState">
                <div ref="enoughDrug">订单正常发货</div>
                <div ref="lackDrug">
                  <h5>数量与订单数量不符，订单金额将自动调整：</h5>
                  <table>
                    <tbody>
                      <tr>
                        <td>调整后订单总价</td>
                        <td>￥{{confirmTotalList[index]*item.price}}</td>
                      </tr>
                      <tr>
                        <td>调整后实际到账货款</td>
                        <td>￥{{(confirmTotalList[index]*item.price)-(item.price*confirmTotalList[index]*item.info_fee_rate)}}</td>
                      </tr>
                      <tr>
                        <td>将向买家退回</td>
                        <td>￥{{item.amount - confirmTotalList[index]*item.price}}</td>
                      </tr>
                      <tr>
                        <td>调整后到账积分</td>
                        <td>{{parseInt((item.price*confirmTotalList[index]*item.info_fee_rate)/ 0.24 * 0.36)}}分</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </li>
          </ul>
          <div class="system-messagebox1-btn clear">
            <div @click="clickChangeTotal(3)">确定</div>
            <div @click="hideSystemPopup">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import topBar from "../../public/top";
  import leftBar from "../../public/left";
  import homeBar from "../../public/homebar";
  export default {
    components: {
      leftBar,
      topBar,
      homeBar
    },
    data() {
      return {
        data: "/allorders",
        currentPageName: "全部订单",
        unconfirmed: false, // 未确认 显示 确认订单按钮
        pendingdelivery: false, //待发货  显示  发货按钮
        otherallorders: false, //其他  显示  打印仓库取货单 打印发货单  按钮
        orderDetailsState: "", //订单状态
        currentPage: {
          path: "/allorders",
          name: "订单管理"
        },
        showSystemPopup: false,
        showDeliveryPopup: false,
        systemPopupTitle: "",
        showOrderDetailPopup: false,
        isActive: false, //判断打印发货单
        barcode_option: {
          displayValue: false, //是否默认显示条形码数据
          background: "#fff", //条形码背景颜色
          valid: function(valid) {
            console.log(valid);
          },
          width: "1px",
          height: "39px"
        },
        order: "",
        order_id: "",
        confirmTotalList: [],
        new_medical_list: [], //当status=2时并且有修改订单药品数量必传
        logistics_com: "",
        new_medical_list: "",
        showLogisticsComTip: false,
        showLogisticsNumTip: false,
      };
    },
    activated() {
      this.unconfirmed = false; // 未确认 显示 确认订单按钮
      this.otherallorders = false; //其他  显示  打印仓库取货单 打印发货单  按钮
      this.pendingdelivery = false; //待发货  显示  发货按钮
      if (this.$route.params.id == 0) {
        this.currentPageName = "全部订单";
      } else if (this.$route.params.id == 2) {
        this.currentPageName = "未确认订单";
        this.unconfirmed = true;
      } else if (this.$route.params.id == 3) {
        this.currentPageName = "待发货订单";
        this.otherallorders = true;
        this.pendingdelivery = true;
        this.otherallorders = true;
      } else if (this.$route.params.id == 4) {
        this.currentPageName = "已发货订单";
        this.otherallorders = true;
      } else if (this.$route.params.id == 5) {
        this.currentPageName = "已结算订单";
        this.otherallorders = true;
      }
      this.getOrderDetail(this.$route.params.oid);
    },
    methods: {
      //错误弹窗
      messageAlert(msg) {
        this.$message.error(msg);
      },
      //成功弹窗
      successfulAlert(msg) {
        this.$message({
          message: msg,
          type: 'success'
        });
      },
      //提示框
      infoAlert(msg) {
        this.$message(msg);
      },
      //点击确认订单
      clickConfirmOrder(orderId) {
        this.getOrderDetail(orderId); //获取订单信息
        this.order_id = orderId;
        this.showSystemPopup = true;
        this.showOrderDetailPopup = true;
        this.systemPopupTitle = "确认订单";
      },
      //获取订单详情数据
      getOrderDetail(oid) {
        let _this = this;
        this.confirmTotalList = [];
        let ourls =
          this.urls +
          "/who/user/refreshToken/" +
          localStorage.getItem("uid") +
          "/" +
          localStorage.getItem("token");
        checkTime(
          new Date().getTime() / 1000,
          ourls,
          localStorage.getItem("reToken")
        );
        _this
          .$http({
            url: this.urls +
              "/who/order/getOrderDetail/" +
              localStorage.getItem("uid") +
              "/" +
              localStorage.getItem("token") + "?order_id=" + oid,
            method: "get"
          })
          .then(function(res) {
            let data = res.data;
            if (data.code == 1) {
              _this.order = data.data.order;
              for (var i = 0; i < data.data.order.medical_list.length; i++) {
                _this.confirmTotalList.push(data.data.order.medical_list[i].total);
              }
              console.log(_this.order);
              localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
            } else {
              _this.messageAlert(data.msg);
              invalid(data.msg); //检查token失效函数
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      //确定有货数量输入框的change事件
      changeTotalNum(orgTotal, newTotal, index, id) {
        if (orgTotal < newTotal) {
          this.messageAlert("确认确定有货数量不能大于客户下单数量");
          this.$refs.enoughDrug[index].style.display = "none"
          this.$refs.lackDrug[index].style.display = "none"
          return;
        } else if (orgTotal == newTotal) {
          this.$refs.enoughDrug[index].style.display = "block"
          this.$refs.lackDrug[index].style.display = "none"
        } else if (orgTotal > newTotal) {
          this.$refs.enoughDrug[index].style.display = "none"
          this.$refs.lackDrug[index].style.display = "block"
        }
        if (this.new_medical_list.length <= 0) {
          this.new_medical_list.push({
            medical_id: id,
            total: newTotal
          });
        } else {
          for (var i = 0; i < this.new_medical_list.length; i++) {
            if (this.new_medical_list[i].medical_id == id) {
              this.new_medical_list[i].total = newTotal;
              return;
            }
          }
          this.new_medical_list.push({
            medical_id: id,
            total: newTotal
          });
        }
      },
      //点击确认订单弹窗中的确定
      clickChangeTotal(status) {
        let _this = this;
        let ourls =
          this.urls +
          "/who/user/refreshToken/" +
          localStorage.getItem("uid") +
          "/" +
          localStorage.getItem("token");
        checkTime(
          new Date().getTime() / 1000,
          ourls,
          localStorage.getItem("reToken")
        );
        _this.new_medical_list = JSON.stringify(_this.new_medical_list);
        var data = "";
        if (status == 3) { //确认订单
          data = {
            order_id: _this.order_id,
            new_medical_list: _this.new_medical_list,
            status: 3
          }
        } else if (status == 4) { //确认发货
          if (this.logistics_com == "") {
            this.showLogisticsComTip = true;
            return;
          }
          if (this.logistics_num == "") {
            this.showLogisticsNumTip = true;
            return;
          }
          data = {
            order_id: _this.order_id,
            logistics_com: _this.logistics_com, //物流公司
            status: 4,
            logistics_num: this.logistics_num //物流单号
          }
        }
        _this
          .$http({
            url: this.urls +
              "/who/order/changeOrderStatus/" +
              localStorage.getItem("uid") +
              "/" +
              localStorage.getItem("token"),
            method: "post",
            data: data,
            transformRequest: [function(data) {
              let ret = ''
              for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              return ret
            }],
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
          })
          .then(function(res) {
            let data = res.data;
            if (data.code == 1) {
              _this.hideSystemPopup();
              localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
            } else {
              _this.messageAlert(data.msg);
              invalid(data.msg); //检查token失效函数
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      //关闭弹窗
      hideSystemPopup() {
        this.showSystemPopup = false;
        this.showDeliveryPopup = false;
        this.showOrderDetailPopup = false;
        this.systemPopupTitle = "";
        this.showLogisticsComTip = false;
        this.showLogisticsNumTip = false;
      },
      deliverys(orderId) {
        this.order_id = orderId;
        this.showSystemPopup = true;
        this.showDeliveryPopup = true;
        this.systemPopupTitle = "填入物流信息";
      },
      print() {
        var newstr = document.getElementsByClassName("prints")[0].innerHTML;
        document.body.innerHTML = newstr;
        window.print();
        // 重新加载页面，以刷新数据
        window.location.reload();
      },
      prints() {
        this.isActive = true;
        setTimeout(function() {
          var newstrs = document.getElementsByClassName("printss")[0].innerHTML;
          document.body.innerHTML = newstrs;
          window.print();
          // 重新加载页面，以刷新数据
          window.location.reload();
        }, 500);
      },
      addPath(n1, n2, n3) {
        //点击切换home-bar
        var obj = {};
        obj.n1 = n1;
        obj.n2 = n2;
        this.$store.commit("addPath", obj);
      }
    },
    filters: {
      statusFun(val) {
        var data = "";
        if (val == 1) {
          data = "待付款"
        } else if (val == 2) {
          data = "待受理";
        } else if (val == 3) {
          data = "待发货";
        } else if (val == 4) {
          data = "待收货";
        } else if (val == 5) {
          data = "已完成";
        }
        return data;
      },
      pay_type_fun(val) {
        var data = "";
        if (val == 1) {
          data = "微信"
        } else if (val == 2) {
          data = "支付宝";
        } else if (val == 3) {
          data = "快捷支付";
        } else if (val == 4) {
          data = "余额支付";
        }
        return data;
      }
    },
  };
</script>

<style lang="less">
  @import "orderManagement.less";
</style>

